<template>
  <div class="win">
    <form @submit="submit">
      <div class="input_box">
        <input
          type="text"
          v-model="inputName"
          placeholder="请输入收货人姓名"
          maxlength="10"
          placeholder-style="color:#C3C3C3"
        />
        <input
          type="text"
          v-model="inputPhone"
          placeholder="请输入收货手机号"
          maxlength="11"
          placeholder-style="color:#C3C3C3"
        />
        <input
          type="text"
          v-model="inputAddress"
          placeholder="请输入收货人地址"
          maxlength="80"
          placeholder-style="color:#C3C3C3"
        />
      </div>
      <div class="btn_box">
        <button form-type="submit">保存</button>
      </div>
    </form>
    <i-toast id="toast" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      bjurl: "",
      inputName: "",
      inputPhone: "",
      inputAddress: "",
      address_id: "",
      address_status: "",
      inputTap: 0
    };
  },
  methods: {
    // 请求接口修改收货地址
    getReviseAddress() {
      this.$ajax("/home/address/write", "post", {
        address_id: this.address_id,
        address: this.inputAddress,
        name: this.inputName,
        phone: this.inputPhone,
        status: this.address_status
      })
        .then(res => {
          if (res.status) {
            this.$toast({
              content: "修改成功!"
            });
            wx.navigateTo({
              url: "../shippingAddress/main"
            });
          } else {
            this.$toast({
              content: res.msg
            });
          }
        })
        .catch(err => {});
    },
    //请求接口编辑收货地址
    getAddressDetail() {
      if (this.address_id != undefined) {
        this.$ajax("/home/address/address_detail", "post", {
          address_id: this.address_id
        })
          .then(res => {
            if (res.status) {
              this.inputName = res.data.name;
              this.inputPhone = res.data.phone;
              this.inputAddress = res.data.address;
              this.address_status = res.data.status;
              this.inputTap = 1;
            } else {
            }
          })
          .catch(err => {});
      }
    },
    //请求接口收货地址创建
    getFoundAddress() {
      this.$ajax("/home/address/create", "post", {
        address: this.inputAddress,
        name: this.inputName,
        phone: this.inputPhone
      })
        .then(res => {
          if (res.status) {
            this.$toast({
              content: "创建成功!"
            });
            wx.navigateBack({});
          } else {
            this.$toast({
              content: res.msg
            });
          }
        })
        .catch(err => {});
    },
    // 判断手机号
    isPhone(phone) {
      return !(!/^(1[3-9])\d{9}$/.test(phone) || phone == "");
    },
    // 提交表单内容
    submit(e) {
      if (this.inputName == "")
        return this.$toast({
          content: "请输入姓名"
        });
      // let form_id = e.mp.detail.formId;
      if (!this.isPhone(this.inputPhone))
        return this.$toast({
          content: "请输入有效手机号码"
        });
      if (this.inputAddress == "")
        return this.$toast({
          content: "请输入收货地址"
        });
      if (this.inputTap == 1) {
        this.getReviseAddress();
      } else this.getFoundAddress();
    }
  },
  onLoad(e) {
    Object.assign(this.$data, this.$options.data());
    this.bjurl = this.$bjurl;
    this.address_id = e.address_id;
    this.getAddressDetail();
  }
};
</script>

<style lang="scss" scoped>
.win {
  .input_box {
    box-sizing: border-box;
    width: 750rpx;
    padding: 0 40rpx;
    input {
      box-shadow: 4rpx 6rpx 16prx 0rpx rgba(119, 119, 119, 0.25);
      height: 70rpx;
      background: rgba(255, 255, 255, 1);
      border-radius: 20rpx;
      margin: 7% 0 0 0;
      font-size: 30rpx;
      color: #4d4d4d;
      padding: 0 24rpx;
    }
    .yzm_box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .yzm {
        width: 438rpx;
        margin-right: 20rpx;
      }
      button {
        margin: 7% 0 0 0;
        width: 210rpx;
        height: 68rpx;
        line-height: 68rpx;
        background-color: #ffffff;
        color: $green;
        border-radius: 20rpx;
      }
      .grey {
        color: #c3c3c3;
      }
    }
  }
  .btn_box {
    margin-top: 10vh;
    button {
      line-height: 92rpx;
      color: #ffffff;
      font-size: 40rpx;
      margin: 7% auto 0;
      width: 692rpx;
      height: 92rpx;
      background: linear-gradient(
        0deg,
        rgba(11, 208, 94, 1),
        rgba(11, 208, 173, 1)
      );
      border-radius: 46rpx;
    }
  }
}
</style>
